<!-- 页面代码框架结构 -->
<template>
    <div class="demo">Demo组件</div>
    <p>{{mes}}</p>
    <p>{{ num+1}}</p>
    <p>{{"Vue.js"}}</p>
    <p>{{ Obj.name }}</p>
    <p>{{ ok?'YES':'NO' }}</p>
    <p class="p1">{{ mes1 }}</p>
</template>

<!-- 页面数据, 方法-->
<script setup>
const mes="定义数据";
const num=10;
const Obj={  //大括号定义  输出用双大括号
    name:"周欣耀"
}
const ok=true;
const mes1="红色文字"
</script>

<!-- 当前页面样式 -->
<style>
   .demo{
    font-size: 30px;
    font-weight: bold;
}
.p1{
    color:red
}
</style>